<template>
    <div class="fillcontain">
        <nav-header></nav-header>
        
        <el-card class="box-card">
            
            <div slot="header" class="clearfix">
                <div class="md_list">
                    <el-button type="text" >订单状态</el-button>
                    <el-button type="primary">待审核</el-button>
                    <el-button type="default">待收货</el-button>
                    <el-button type="primary">已取消</el-button>
                    <el-button type="primary">已完成</el-button>
                </div>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="订单编号">
                        <el-input v-model="formInline.orderNum" placeholder="订单编号"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="formInline.orderPhone" placeholder="手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="订单类型">
                        <el-select v-model="formInline.orderType" placeholder="订单类型">
                            <el-option label="不限" value=""></el-option>
                            <el-option label="线上" value=""></el-option>
                            <el-option label="线下" value=""></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="下单日期">
                        <el-date-picker
                          v-model="value2"
                          align="right"
                          type="date"
                          placeholder="选择日期"
                          :picker-options="pickerOptions1">
                        </el-date-picker>
                    </el-form-item>
                    
                    <el-form-item>
                        <el-button type="success" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>

            

            <el-table :data="tableData" border style="width: 100%">
                <el-table-column fixed prop="date" label="下单时间" width="180"></el-table-column>
                <el-table-column prop="index" label="#" width="50"></el-table-column>
                <el-table-column prop="orderId" label="订单编号" width="200"></el-table-column>
                <el-table-column prop="produceName" label="商品" width="300"></el-table-column>
                <el-table-column prop="orderType" label="订单类别" width="120"></el-table-column>
                <el-table-column prop="orderPrice" label="订单价格" width="100"></el-table-column>
                <el-table-column prop="ueseName" label="买家" width="120"></el-table-column>
                <el-table-column prop="orderStates" label="订单状态" width="100"></el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination style="margin-top: 25px;" background layout="prev, pager, next" :total="1000"></el-pagination>

        </el-card>

    </div>
</template>

<script>
import NavHeader from '@/components/header.vue';
export default {
    name: 'OrderList',
    data () {
        return {
            tableData: [{
                date: '2016-05-03 17:23:51',
                index: 1,
                orderId: 201802021723515156,
                produceName: 'Phone X 国行正品网络:全网通 颜色:深空灰色 内存:256G',
                orderType: '在线下单',
                orderPrice: '4566',
                ueseName: '曹少雄',
                orderStates: 0
            }, {
                date: '2016-05-03 17:23:51',
                index: 2,
                orderId: 201802021723515156,
                produceName: 'Phone X 国行正品网络:全网通 颜色:深空灰色 内存:256G',
                orderType: '在线下单',
                orderPrice: '4566',
                ueseName: '曹少雄',
                orderStates: 0
            }, {
                date: '2016-05-03 17:23:51',
                index: 3,
                orderId: 201802021723515156,
                produceName: 'Phone X 国行正品网络:全网通 颜色:深空灰色 内存:256G',
                orderType: '在线下单',
                orderPrice: '4566',
                ueseName: '曹少雄',
                orderStates: 0
            }, {
                date: '2016-05-03 17:23:51',
                index: 4,
                orderId: 201802021723515156,
                produceName: 'Phone X 国行正品网络:全网通 颜色:深空灰色 内存:256G',
                orderType: '在线下单',
                orderPrice: '4566',
                ueseName: '曹少雄',
                orderStates: 0
            }],
            formInline: {
                orderNum: '',
                orderPhone: '',
                orderType: ''
            },
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }
                ]
            },
            value2: '',
        }
    },
    mounted(){
        
    },
    created () {

    },
    methods: {
        onSubmit() {
            console.log('submit!');
        }
    },
    components: {
        NavHeader
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.shop_box{
    width: 100%;
}
.btn_sp{
    width: 100%; height: 50px;
}
.box-card{
    width: 94%;
    margin: 20px auto;
}
.el-table__row .el-table .cell {
    padding: 8px;
    font-size: 12px;
}
.cell{
    text-align: center;
}
.md_list{
    width: 100%; box-sizing: border-box;
    padding: 18px 20px;
    border-bottom: 1px solid #d1dbe5;
    margin-bottom: 20px;
}
</style>
